<script lang="ts">
  export default {
    name: 'Login',
  };
</script>

<script setup lang="ts">
  import { ref, computed, reactive } from 'vue';
  import {
    showConfirmDialog,
    showToast,
    showLoadingToast,
    closeToast,
    Form,
    Field,
    Button,
    CellGroup
  } from 'vant';
  import { useRouter } from 'vue-router';
  import { useWindowSize } from '@vueuse/core';
  import storage from 'good-storage';
  import API_HOME from '@/apis/home';
  import { useUserStore } from '@/store/modules/user';
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  const router = useRouter();
  const { width } = useWindowSize();
  let userStore = useUserStore();
  // 表单数据
  const logForm = reactive({
    account: '',
    password: '',
  })

  const rememberMe = ref(false);

  // 表单验证规则
  const emailRules = [
    { required: true, message: t('login.please') + t('login.Email') },
    // { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: t('login.please') + t('login.Email') }
  ];

  const passwordRules = [
    { required: true, message: t('login.please') + t('login.Password') },
  ];

  // 登录处理
  const handleLogin = async () => {
    showLoadingToast({
      message: 'Loading...',
      forbidClick: true,
    });
    let res = await API_HOME.login(logForm);
    if (res.code == 1) {
      closeToast();
      showToast(t('login.LoginSuccessful'));
      console.log('登录成功', res.data.token);
      // 获取个人信息
      getInfo()
      storage.set('token', res.data.token);
      userStore.token = res.data.token;
      router.push('/');
    }
    setTimeout(() => {
      logForm.value = {
        account: '',
        password: '',
      }
    }, 500);
  };
  const getInfo = async () => {
    let res = await API_HOME.profile();
    if (res.code == 1) {
      storage.set('userInfo', res.data);
      userStore.userInfo = res.data;
    }
  }
  // 响应式判断
  const isMobile = computed(() => width.value < 768);
</script>

<template>
  <div class="login-container">
    <!-- 标题区域 -->
    <div class="login-header">
      <h1 :class="['login-title', { 'mobile-title': isMobile }]">{{$t('login.WelcomeToLogin')}}</h1>
      <p v-if="!isMobile" class="login-subtitle">{{$t('login.PleaseEnterYourAccountInformation')}}</p>
    </div>

    <!-- 表单区域 -->
    <van-form @submit="handleLogin" class="login-form">
      <van-cell-group inset>
        <van-field v-model="logForm.account" name="email" :label="$t('login.Email')"
          :placeholder="$t('login.please')+$t('login.Email')" :rules="emailRules" clearable
          :size="isMobile ? 'small' : 'large'" />

        <van-field v-model="logForm.password" name="password" :label="$t('login.Password')"
          :placeholder="$t('login.please')+$t('login.Password')" :rules="passwordRules" type="password" clearable
          :size="isMobile ? 'small' : 'large'" />
      </van-cell-group>

      <!-- 记住我选项 -->
      <div class="remember-me">
        <van-checkbox v-model="rememberMe" shape="square">{{$t('login.rememberMe')}}</van-checkbox>
        <!-- <router-link to="/forgot-password" class="forgot-password">忘记密码?</router-link> -->
      </div>

      <!-- 登录按钮 -->
      <div class="login-button">
        <van-button square block color="#333333" native-type="submit" :size="isMobile ? 'normal' : 'large'">
          {{$t('login.login')}}
        </van-button>
      </div>

      <!-- 注册链接 -->
      <div class="register-link">
        {{$t('login.NoAccountYet')}}? <router-link to="/register">{{$t('login.RegisterNow')}}</router-link>
      </div>
    </van-form>

    <!-- 底部区域 -->
    <!-- <div class="login-footer">
      <p>© 2023 公司名称 版权所有</p>
    </div> -->
  </div>
</template>

<style lang="less" scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 20px;
    background-color: #f5f7fa;
    box-sizing: border-box;

    .login-header {
      text-align: center;
      margin: 40px 0 30px;

      .login-title {
        font-size: 28px;
        color: #333;
        margin-bottom: 10px;

        &.mobile-title {
          font-size: 24px;
        }
      }

      .login-subtitle {
        font-size: 16px;
        color: #666;
      }
    }

    .login-form {
      flex: 1;
      max-width: 480px;
      width: 100%;
      margin: 0 auto;

      .remember-me {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 16px;
        font-size: 14px;

        .forgot-password {
          color: #1989fa;
          text-decoration: none;
        }
      }

      .login-button {
        margin: 30px 16px;

        @media (min-width: 768px) {
          margin: 40px 16px;
        }
      }

      .register-link {
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-top: 20px;

        a {
          color: #1989fa;
          text-decoration: none;
        }
      }
    }

    .login-footer {
      text-align: center;
      padding: 20px 0;
      color: #999;
      font-size: 12px;
      margin-top: auto;
    }
  }

  /* PC端样式 */
  @media (min-width: 768px) {
    .login-container {
      justify-content: center;
      padding: 40px;

      .login-header {
        margin: 0 0 40px;
      }

      .login-form {
        background-color: #fff;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
    }
  }

  /* 移动端样式调整 */
  @media (max-width: 767px) {
    .van-cell-group {
      margin: 0 !important;
    }

    .van-field {
      padding: 12px 16px;
    }
  }
</style>